import { Icon, IconProps } from '@aws-amplify/ui-react'; import * as React from 'react'; import { demoState } from '@/utils/demoState'; import { IconPropControlsProps } from './IconPropControls'; interface UseIconProps { (initialValues: IconProps): IconPropControlsProps; } export const useIconProps: UseIconProps = (initialValues) => { const [pathData, setPathData] = React.useState<IconProps['pathData']>( initialValues.pathData ); const [viewBox, setViewBox] = React.useState<IconProps['viewBox']>( initialValues.viewBox ); const [width, setWidth] = React.useState<IconProps['width']>( initialValues.width ); const [height, setHeight] = React.useState<IconProps['height']>( initialValues.height ); const [ariaLabel, setAriaLabel] = React.useState<IconProps['ariaLabel']>( initialValues.ariaLabel ); const [color, setColor] = React.useState<IconProps['color']>( initialValues.color ); React.useEffect(() => { demoState.set(Icon.displayName, { pathData, viewBox, ariaLabel, width, height, color, }); }, [pathData, viewBox, ariaLabel, width, height, color]); return React.useMemo( () => ({ pathData, setPathData, viewBox, setViewBox, ariaLabel, setAriaLabel, width, setWidth, height, setHeight, color, setColor, }), [ pathData, setPathData, viewBox, setViewBox, ariaLabel, setAriaLabel, width, setWidth, height, setHeight, color, setColor, ] ); };